今天，我們要來看看在使用 Angular CLI 後，專案的架構會長什麼樣？

• angular.json：是 Angular CLI 的設定檔，包含許多參數，必要時要來這邊調整。
• .editorconfig：是常見的編輯器設定檔，針對你目前使用的編輯器來設定，e.g. 如何處理 tab 符號及斷行符號等內容，可以根據自己的需求，進行設定。
• .gitignore：是 Git 的忽略設定檔，裡頭定義的是不需要進入版控的檔案及資料夾。
• karma.conf.js：如果有使用到 Karma 這個單元測試工具時，有機會用到。
• package.json：你目前專案的 npm 設定檔，是個十分重要的檔案，裡頭可以看到一些套件的版本，在 script 這個區塊裡，包含了將來在使用 Angular 開發時，會用到的命令，如：我們前一篇文使用到的 npm start/ng serve。
• tsconfig.json：是專案 TypeScript 相關設定存放的地方，通常不太需要修改。
• tsconfig.app.json：繼承自 tsconfig.json，並做出額外的設定，比較有機會用到的地方為檔案裡頭的 types 部分。
• tsconfig.spec.json：用於測試的 TypeScript 設定。
• node_modules：這個資料夾包含了我們使用 npm 安裝好的所有套件，檔案很多又大，在 .gitingore 裡預設是把這個資料夾列入，不進入版控。

接下來要介紹的是我們最常接觸的資料夾 src，我們開發 Angular 主要的原始碼都放在這個資料夾裡。

• app 資料夾：裡面包含我們 Angular 應用程式的主要檔案。
  • app.component.ts：為 app.module 指定的 Angular 應用程式的根元件。
  • app.component.html：app.component.ts 的 template，裡頭定義了這個元件的範本。
  • app.component.css：可在裡頭定義此元件的 CSS。
  • app.component.spec.ts：此為單元測試的定義檔。
• index.html：Angular 這個 Web 應用程式的首頁。
• style.css：此為 global styles，也就是整個應用程式通用的 CSS 設定可以寫在這裡。
• main.ts：Angular 官方建議使用 TypeScript 來當成開發 Angular 的程式語言，因此不會看到 .js 檔，此檔案為 Angular 的 JavaScript 程式的進入點，為主程式所在。
• assets 資料夾：assets 為資產的意思，通常裡面包含專案所有的靜態檔案，e.g. 額外的 JavaScript 檔案、額外的 CSS 檔案、額外的圖片、favicon 等。
  • .gitkeep：此檔案是給 Git 看的，因為我們在做版控時，如果有一個資料夾裡頭連一個檔案都沒有，這個資料夾是不會進入版控的，所以此檔案是為了讓 assets 能進入版控而設計的。
• environments 資料夾：裡頭的檔案為此 Angular 應用程式會用到的環境變數。
  • environment.ts：開發時期，預設使用此檔案。
  • environment.prod.ts：build 出 production 版的 Angular 應用程式才用得上。
• favicon.ico：瀏覽器頁籤上的 icon 圖檔。
• polyfills.ts：當 Angular 在執行時，如果使用者用了較舊版的瀏覽器，有些功能可能無法正確呈現，此時，就可以在此檔案中，把相對應的 code 取消註解，把所需的 npm 模組 import 進來，來讓 Angular 應用程式可以在舊版瀏覽器正常運作。
• test.ts：寫單元測試時才會用到。

以上就是我們在安裝了 Angular CLI 之後，整個專案架構的簡單介紹。